<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 300px;height: 300px;background: red;opacity: 0.2;}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		var obox = document.getElementById("box")
		var speed = 10;
		var iNow = 20;
		var timer = null;
		
		obox.onmouseover = function(){
			clearInterval(timer);
			timer = setInterval(function(){
				if(iNow == 100){
					clearInterval(timer)
				}else{
					iNow += speed
					obox.style.opacity = iNow /100;
				}
			},30)
		}
		obox.onmouseout = function(){
			clearInterval(timer);
			timer = setInterval(function(){
				if(iNow == 20){
					clearInterval(timer);
				}else{
					iNow -= speed
					obox.style.opacity = iNow /100;
				}
			},30)
		}
	</script>
</html>
